Skip to content

Tracker.tsx#517

Merged
mehul-m-prajapati merged 2 commits into
GitMetricsLab:mainfrom
Rajlakshmi-ai:main
May 31, 2026
Merged

Tracker.tsx#517
mehul-m-prajapati merged 2 commits into
GitMetricsLab:mainfrom
Rajlakshmi-ai:main

Conversation

@Rajlakshmi-ai
Copy link
Copy Markdown
Contributor

@Rajlakshmi-ai Rajlakshmi-ai commented May 25, 2026

Related Issue


Description

Optimized the GitHub username search workflow in Tracker.tsx by transitioning from a manual form submission to a debounced auto-search mechanism.

Key Changes:

Added a useEffect hook utilizing a 500ms setTimeout to automatically trigger fetchData after the user stops typing.

Added a cleanup function (clearTimeout) to discard pending timers on successive keystrokes, effectively mitigating rapid, redundant API calls.

Removed the legacy manual handleSubmit function.

Cleaned up the JSX by removing the container

wrapper and deleting the redundant "Fetch Data" component to deliver a cleaner, modern user experience


How Has This Been Tested?

Local Environment Verification: Ran the local Vite development server and verified the search bar behavior on the Tracker page.

Debounce Verification: Confirmed via the browser's Network tab that entering a username triggers exactly one API request 500ms after typing ceases, rather than firing a request for every single keystroke or requiring a manual button click.

Type of Change

  • Bug fix
  • New feature
  • Code style update
  • Breaking change
  • Documentation update

Summary by CodeRabbit

  • New Features

    • Data automatically refreshes when switching tabs, pages, or updating username with debouncing.
  • UI/UX

    • Authentication input section redesigned from form-based submission to a static "Auth Input Controls" panel.
    • Adjusted dropdown padding styling for improved appearance.

Review Change Stack

@netlify
Copy link
Copy Markdown

netlify Bot commented May 25, 2026

Deploy Preview for github-spy failed.

Name Link
🔨 Latest commit d27a497
🔍 Latest deploy log https://app.netlify.com/projects/github-spy/deploys/6a1c09ee8418c400085099b5

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 25, 2026

Warning

Review limit reached

@mehul-m-prajapati, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 58 minutes and 59 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: f810f354-096d-4071-be40-b947e179e563

📥 Commits

Reviewing files that changed from the base of the PR and between 32e30f8 and d27a497.

📒 Files selected for processing (1)
  • src/pages/Tracker/Tracker.tsx
📝 Walkthrough

Walkthrough

Tracker.tsx refactors data fetching from manual form submission to React effect-driven automation. It adds debounced username change handling that triggers fetchData with pagination reset, removes the auth form and submit button, restructures the auth section as a static panel, and adjusts Select dropdown styling.

Changes

Tracker Data Fetching and Auth UI Refactor

Layer / File(s) Summary
Effect-driven data fetching with debounced username changes
src/pages/Tracker/Tracker.tsx
A new debounced useEffect triggers fetchData when username changes, automatically resetting page to 0. The existing fetch effect is adjusted to depend on tab and page changes instead of manual form submission.
Auth UI panel and form removal
src/pages/Tracker/Tracker.tsx
The auth form wrapper and submit button are removed, replaced by a static "Auth Input Controls" panel. Username and token fields remain with helper content and links, but form submission wiring is eliminated.
Select dropdown padding adjustment
src/pages/Tracker/Tracker.tsx
The .MuiSelect-select CSS padding rule is updated for the state dropdown component.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

  • GitMetricsLab/github_tracker#331: Both PRs modify src/pages/Tracker/Tracker.tsx to add debounce-driven username handling logic with useEffect, where the main PR triggers fetchData on username changes and the related PR fetches GitHub username suggestions.
  • GitMetricsLab/github_tracker#355: Both PRs refactor src/pages/Tracker/Tracker.tsx to replace manual submit flow with debounced effect-driven data fetching that resets pagination on input changes.
  • GitMetricsLab/github_tracker#255: Both PRs refactor src/pages/Tracker/Tracker.tsx to remove submit-based filtering and drive fetchData via debounced useEffect with updated tab and page handling.

Suggested labels

type:feature, level:intermediate, quality:clean

Poem

🐰 No more forms to submit, no buttons to click,
The Tracker now watches with debounce so slick!
Username changes trigger a fetch, fresh and bright,
While auth fields rest static—a UI delight. ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Title check ⚠️ Warning The title 'Tracker.tsx' is too vague and generic; it merely names the file without conveying the meaningful change of adding debounced auto-search functionality. Revise the title to be more descriptive, such as 'Add debounced auto-search to Tracker username input' or 'Implement debounced GitHub username search in Tracker.tsx'.
✅ Passed checks (4 passed)
Check name Status Explanation
Description check ✅ Passed The description is comprehensive and includes all required template sections: Related Issue, detailed Description with key changes, How it was tested, and Type of Change selection.
Linked Issues check ✅ Passed The pull request implements all key requirements from issue #511: debounced search with 500ms delay, cleanup function to cancel pending timers, removed manual form submission, and automated API calls after typing stops.
Out of Scope Changes check ✅ Passed All code changes are directly aligned with issue #511 objectives; UI styling adjustments to Select dropdown padding are minor and in scope for modernizing the component during refactoring.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown

@github-actions github-actions Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/pages/Tracker/Tracker.tsx`:
- Line 306: The object literal used in the sx prop contains an unquoted selector
key "& .MuiSelect-select" which is invalid; update the selector key in the
styles object (the entry near the Select/MuiSelect styling in Tracker.tsx) to a
quoted string (e.g., change & .MuiSelect-select to "& .MuiSelect-select") so the
object parses correctly and the sx styling is applied.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 829e0159-a850-456a-ae96-b871b0e80df1

📥 Commits

Reviewing files that changed from the base of the PR and between 6c6bc3e and 32e30f8.

📒 Files selected for processing (1)
  • src/pages/Tracker/Tracker.tsx

color: theme.palette.text.primary,
borderRadius: "4px",
"& .MuiSelect-select": { padding: "10px" },
& .MuiSelect-select: { padding: "10px" },
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical | ⚡ Quick win

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Verify the invalid selector-key pattern in the sx object.
rg -n --fixed-strings '& .MuiSelect-select: { padding: "10px" },' src/pages/Tracker/Tracker.tsx

Repository: GitMetricsLab/github_tracker

Length of output: 132


🏁 Script executed:

#!/bin/bash
sed -n '295,315p' src/pages/Tracker/Tracker.tsx

Repository: GitMetricsLab/github_tracker

Length of output: 928


Fix invalid sx selector-key syntax in Tracker.tsx

src/pages/Tracker/Tracker.tsx has an unquoted sx selector key (& .MuiSelect-select) inside an object literal; it must be quoted to avoid parse errors.

💡 Suggested fix
-              & .MuiSelect-select: { padding: "10px" },
+              "& .MuiSelect-select": { padding: "10px" },
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
& .MuiSelect-select: { padding: "10px" },
"& .MuiSelect-select": { padding: "10px" },
🧰 Tools
🪛 Biome (2.4.15)

[error] 306-306: Expected a property, a shorthand property, a getter, a setter, or a method but instead found '&'.

(parse)


[error] 306-306: Expected an expression but instead found '.'.

(parse)


[error] 306-306: Expected an identifier but instead found '{'.

(parse)


[error] 306-306: expected ... but instead found padding

(parse)


[error] 306-306: expected } but instead found :

(parse)


[error] 306-306: Unexpected token. Did you mean {'}'} or }?

(parse)

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/pages/Tracker/Tracker.tsx` at line 306, The object literal used in the sx
prop contains an unquoted selector key "& .MuiSelect-select" which is invalid;
update the selector key in the styles object (the entry near the
Select/MuiSelect styling in Tracker.tsx) to a quoted string (e.g., change &
.MuiSelect-select to "& .MuiSelect-select") so the object parses correctly and
the sx styling is applied.

@mehul-m-prajapati
Copy link
Copy Markdown
Collaborator

@Rajlakshmi-ai - resolve conflict and build failure

@mehul-m-prajapati mehul-m-prajapati merged commit 818dd18 into GitMetricsLab:main May 31, 2026
1 of 6 checks passed
@github-actions
Copy link
Copy Markdown

🎉🎉 Thank you for your contribution! Your PR #517 has been merged! 🎉🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Performance: Add debouncing to GitHub API search inputs to prevent redundant requests

2 participants